/**
 * @desc 模板1
 * @author pengdaokuan
 */
import React, { useEffect, useState } from 'react';
import './index.less';
import Avatar from './components/Avatar';
import BaseInfo from './components/BaseInfo';
import Contact from './components/Contact';
import Job from './components/Job';
import Certificate from './components/Certificate';
import Synopsis from './components/Synopsis';
import Skill from './components/Skill';
import Post from './components/Post';
import Project from './components/Project';
import Work from './components/Work';
import { useSelector } from 'react-redux';
import { RESUME_TOOLBAR_MAPS } from '@common/constants/resume';
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
function TemplateOne() {
  const base: TSResume.Base = useSelector((state: any) => state.resumeModel.base);
  const resumeToolbarKeys: string[] = useSelector((state: any) => state.templateModel.resumeToolbarKeys);
  // 组件内部状态
  const [moduleOrder, setModuleOrder] = useState([]);
  // 在组件内部定义常量
  const MODULE_IDS = {
    SKILL: RESUME_TOOLBAR_MAPS.skill,
    SCHOOL_EXPERIENCE: RESUME_TOOLBAR_MAPS.schoolExperience,
    PROJECT_EXPERIENCE: RESUME_TOOLBAR_MAPS.projectExperience,
    WORK_EXPERIENCE: RESUME_TOOLBAR_MAPS.workExperience,
    SYNOPSIS: 'synopsis'
  };
  // 根据条件生成模块顺序
  useEffect(() => {
    const newOrder: string[] = [];

    // 添加常规模块
    resumeToolbarKeys.forEach(key => {
      if (Object.values(RESUME_TOOLBAR_MAPS).includes(key)) {
        newOrder.push(key);
      }
    });

    // 添加摘要模块
    if (resumeToolbarKeys.includes(RESUME_TOOLBAR_MAPS.evaluation) || base?.username) {
      newOrder.push(MODULE_IDS.SYNOPSIS);
    }

    // 保持现有顺序并添加新模块
    setModuleOrder((prev): any => [
      ...prev.filter(id => newOrder.includes(id)),
      ...newOrder.filter(id => !prev.includes(id as never))
    ]);
  }, [resumeToolbarKeys, base?.username]);

  // 拖拽处理函数
  const handleDragEnd = (result: any) => {
    if (!result.destination) return;

    const newOrder = [...moduleOrder];
    const [movedItem] = newOrder.splice(result.source.index, 1);
    newOrder.splice(result.destination.index, 0, movedItem);

    setModuleOrder(newOrder);
  };
  // 必须带有id，以方便导出时获取DOM元素内容
  return (
    <div styleName="a4-box">
      <div styleName="flex container" id="visPdf">
        {/* 左侧 */}
        <div styleName="left">
          <div styleName="avatar">
            <Avatar />
          </div>
          <div styleName="fillColor" />
          <div styleName="baseData" data-pdf-block="left">
            <BaseInfo />
            {resumeToolbarKeys.includes(RESUME_TOOLBAR_MAPS.contact) && <Contact />}
            {resumeToolbarKeys.includes(RESUME_TOOLBAR_MAPS.workPrefer) && <Job />}
            {resumeToolbarKeys.includes(RESUME_TOOLBAR_MAPS.certificate) && <Certificate />}
          </div>
        </div>
        {/* 内容 */}
        <div styleName="center">
          <DragDropContext onDragEnd={handleDragEnd}>
            <Droppable droppableId="modules">
              {(provided) => (
                <div
                  {...provided.droppableProps}
                  ref={provided.innerRef}
                  styleName="listData"
                  data-pdf-block="right"
                >
                  {moduleOrder.map((moduleId, index) => {
                    const componentsMap = {
                      [MODULE_IDS.SKILL]: <Skill />,
                      [MODULE_IDS.SCHOOL_EXPERIENCE]: <Post />,
                      [MODULE_IDS.PROJECT_EXPERIENCE]: <Project />,
                      [MODULE_IDS.WORK_EXPERIENCE]: <Work />,
                      [MODULE_IDS.SYNOPSIS]: <Synopsis />
                    };

                    const component = componentsMap[moduleId] || null;

                    return (
                      <Draggable
                        key={moduleId}
                        draggableId={moduleId}
                        index={index}
                        isDragDisabled={!component} // 当模块隐藏时禁用拖拽
                      >
                        {(provided) => (
                          <div
                            ref={provided.innerRef}
                            {...provided.draggableProps}
                            {...provided.dragHandleProps}
                            style={{
                              ...provided.draggableProps.style,
                              marginBottom: 16 // 添加模块间距
                            }}
                          >
                            {component}
                          </div>
                        )}
                      </Draggable>
                    );
                  })}
                  {provided.placeholder}
                </div>
              )}
            </Droppable>
          </DragDropContext>
        </div>
      </div>
    </div>
  );
}

export default TemplateOne;
